/**
 * 炸金花
 * 炸金花逻辑实现
 * 牌堆一共 52 张牌
 * 分为 4 组，每组 13 张，分别是红心、梅花、方块、黑桃
 * 每组中有 2 3 4 5 6 7 8 9 10 J Q K A
 * 三个 > 清一色 > 顺子 > 对子 > 单牌
 * 而上述循序中最大的牌为 AAA、QKA、QKA、AAK、AKJ
 * 每轮会有一张公共牌，公共牌的花色为最大花色
 * 例如公共牌的花色为黑桃，那么 黑桃的同牌型牌最大，按照 黑桃、梅花、方块、红心 的顺序进行比较
 */

import { useState, useEffect } from 'react'
import { Radio, RadioGroup, Button, MessagePlugin } from 'tdesign-react'
import PockerTable from './PockerTable'

import { deepCopy } from '@/utils'

import './index1.less'

const ThreeAceWin = () => {

  // 角色列表
  const roleList: string[] = ['懒羊羊', '喜羊羊', '美羊羊', '沸羊羊', '慢羊羊', '暖羊羊', '灰太狼', '红太狼', '黑大帅', '潇洒哥']

  // 玩家数量
  const [playerNumber, setPlayerNumber] = useState(0)
  // 玩家角色信息
  const [playerList, setPlayerList] = useState<PlayerRoleType[]>([])
  // 当前玩家角色名称
  const [currentPlayerName, setCurrentPlayerName] = useState('')

  useEffect(() => {
  }, [playerNumber, playerList])

  /**
   * 游戏开始逻辑
   * @param isQuicklyStart 是否快速开始
   */
  const startGame = (isQuicklyStart: boolean) => {
    if (isQuicklyStart) {
      setPlayerList(getPlayerList(true))
      return
    }
    if (!playerNumber) {
      MessagePlugin.warning({
        content: '请选择玩家数量',
        placement: 'top-right',
        duration: 2000
      })
      return
    }
    if (!currentPlayerName) {
      MessagePlugin.warning({
        content: '请选择你的身份',
        placement: 'top-right',
        duration: 2000
      })
      return
    }
    setPlayerList(getPlayerList(false))
  }

  /**
   * 生成所有玩家角色信息
   */
  const getPlayerList = (randomCurrentPlayer: boolean) => {
    let _playerNumber = randomCurrentPlayer ? Math.floor(Math.random() * 3) + 2 : playerNumber
    // 需要排除当前玩家所选的角色
    let _roleList = deepCopy(roleList).filter((item: string) => {
      return item !== currentPlayerName
    })
    let _playerList: PlayerRoleType[] = []
    if (!randomCurrentPlayer) {
      _playerList.push({
        name: currentPlayerName,
        score: 100000,
        pockerGroup: [],
        isCurrentPlayer: true
      })
    }
    for (let i = 1; i <= _playerNumber - Number(!randomCurrentPlayer); i++) {
      _playerList.push({
        name: _roleList.splice(Math.floor(Math.random() * _roleList.length), 1)[0],
        score: 100000,
        pockerGroup: [],
        isCurrentPlayer: (randomCurrentPlayer && i == 1) ? true : false,
        rotateDeg: (240 / _playerNumber) * (i - Number(randomCurrentPlayer))
      })
    }
    randomCurrentPlayer && setPlayerNumber(_playerNumber)
    randomCurrentPlayer && setCurrentPlayerName(_playerList[0].name)
    return _playerList
  }

  /**
   * 重置游戏，将玩家数量、玩家身份、牌堆、公共牌重置
   */
  const resetGame = () => {
    setPlayerNumber(0)
    setCurrentPlayerName('')
    setPlayerList([])
  }

  return <div className='three-ace-win-app'>
    {!playerNumber ? <>
      <div className='player-number'>请选择玩家数量：</div>
      <RadioGroup onChange={(event) => { setPlayerNumber(event as number) }}>
        <Radio value={5} key={5}>5人</Radio>
        <Radio value={4} key={4}>4人</Radio>
        <Radio value={3} key={3}>3人</Radio>
        <Radio value={2} key={2}>2人</Radio>
      </RadioGroup></> : <div className='player-number'>当前玩家数量为：{playerNumber}</div>
    }

    <div className='player-role'>
      <span className='player-role-label'>{currentPlayerName ? '你的身份是: ' : '请选择你的身份: '}</span>
      <span className={`r-${roleList.indexOf(currentPlayerName)}`}>{currentPlayerName}</span>
      {!currentPlayerName && <div className='player-role-selector'>
        <RadioGroup onChange={(event) => { setCurrentPlayerName(event as string) }}>
          {roleList.map((item: string, index: number) => {
            return <Radio value={item} key={item}>{item}</Radio>
          })}
        </RadioGroup>
      </div>}
    </div>
    <div className='game-button-row'>
      <Button className='game-button' onClick={() => { startGame(false) }}>开始</Button>
      <Button className='game-button' onClick={() => { startGame(true) }}>快速开始</Button>
      <Button className='game-button' onClick={resetGame}>重置游戏</Button>
    </div>
    <div className='game-wrapper'>
      {playerList.length > 1 && <PockerTable
        playerNumber={playerNumber}
        playerList={playerList}
      />}
    </div>
  </div>
}

export default ThreeAceWin
